<template>
  <el-aside
      :width="isCollapse ? '64px' : '200px'"
      style="background-color: rgb(238, 241, 246); height: 100%; transition: width 0.3s ease;"
  >
    <!-- 收缩按钮 -->
    <div style="text-align: center; padding: 10px 0;">
      <el-button
          size="small"
          @click="isCollapse = !isCollapse"
          style="background: transparent; border: none;"
      >
        <el-icon><Menu /></el-icon>
      </el-button>
    </div>

    <!-- 菜单组件 -->
    <el-menu
        :default-openeds="['1', '3']"
        :collapse="isCollapse"
        :collapse-transition="false"
        background-color="#f5f7fa"
        text-color="#333"
        active-text-color="#409eff"
    >
      <!-- 导航一 -->
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Message /></el-icon>
          <span v-if="!isCollapse">导航一</span>
        </template>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组2</template>
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title>
            <span v-if="!isCollapse">选项4</span>
          </template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>

      <!-- 导航二 -->
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span v-if="!isCollapse">导航二</span>
        </template>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组2</template>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="2-4">
          <template #title>
            <span v-if="!isCollapse">选项4</span>
          </template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>

      <!-- 导航三 -->
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span v-if="!isCollapse">导航三</span>
        </template>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title v-if="!isCollapse">分组2</template>
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="3-4">
          <template #title>
            <span v-if="!isCollapse">选项4</span>
          </template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
// 1. 导入所有用到的组件
import { ElAside, ElMenu, ElSubMenu, ElMenuItemGroup, ElMenuItem, ElButton, ElIcon } from 'element-plus'
// 2. 导入所需的图标组件（Element Plus 新语法）


// 正确的导入方式（必须带 @ 符号）
import { Menu, Message, Setting } from '@element-plus/icons-vue'

// 3. 响应式变量
import { ref } from 'vue'
const isCollapse = ref(false)
</script>

<style scoped>



</style>
